<template>
    <div class="login">
        <h3>
            <p @click="flag = true">密码登录</p>
            <p @click="flag = false">短信登录</p>
        </h3>
        <div v-show="flag === true">
            <el-form :model="form" :rules="rules" ref="ruleFormRef">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="username">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" show-password placeholder="password">
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                    <el-col :span="10">
                        <el-input v-model="form.captcha" placeholder="验证码">
                            <template #prefix>
                                <el-icon>
                                    <Key />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-col>
                    <img :src="getImg.img" alt="" @click="change">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div v-show="flag === false">
            <el-form>
                <el-form-item>
                    <el-input placeholder="手机号">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="图形验证码">
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="短信验证码">
                        <template #prefix>
                            <el-icon>
                                <Key />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { User, Lock, Key } from '@element-plus/icons-vue';
import { ref, reactive } from "vue"
import { login, common, auth } from "@/service/login"
import type { FormInstance } from 'element-plus'
import { useCounterStore } from "@/stores/counter"
import { useRouter } from 'vue-router';
let router = useRouter()
let store = useCounterStore()
const ruleFormRef = ref<FormInstance>()
let form = ref({
    username: "",
    password: "",
    captcha: ""
} as any)
const getImg = reactive({ img: "", key: "" })
let rules = ref({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],
} as any)
let flag = ref(true)
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
    auth(form.value.captcha, getImg.key, form.value.username, form.value.password).then((res: any) => {
        if (res.errNo == 0) {
            store.userInfo = res.context
            localStorage.setItem("jwt",res.context.jwt)
            router.push("/home/welcome")
            console.log(res)
        }
    })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const yanz = () => {
    login().then((res: any) => {
        getImg.img = res.img
        getImg.key = res.key
    })
}
yanz()
const change = () => {
    yanz()
}
</script>

<style scoped>
.login {
    width: 300px;
    height: 365px;
    border: 1px solid blue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    padding: 10px;
}

button {
    margin: 0 auto;
}

h3 {
    display: flex;
    justify-content: space-between;
}
</style>